<template>
	<view class="strength-indicator">
		<view
			class="strength-bar"
			:class="[strengthLevel >= 1 && strengthClass, strengthLevel >= 2 && strengthClass, strengthLevel >= 3 && strengthClass]"
		></view>
		<text class="strength-text">{{ strengthText }}</text>
	</view>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
	password: String,
});

const strengthLevel = computed(() => {
	if (!props.password) return 0;
	let score = 0;
	if (/[A-Z]/.test(props.password)) score++;
	if (/[0-9]/.test(props.password)) score++;
	if (/[^A-Za-z0-9]/.test(props.password)) score++;
	if (props.password.length >= 10) score++;
	return Math.min(3, Math.floor(score / 1.5));
});

const strengthClass = computed(() => {
	return ['weak', 'medium', 'strong'][strengthLevel.value - 1] || '';
});

const strengthText = computed(() => {
	return ['弱', '中', '强'][strengthLevel.value - 1] || '无';
});
</script>
